<template>
  <div id="recommend">
    <transition name="fade">
      <loading v-if="isLoading"></loading>
    </transition>
    <div
      class="hotGedan"
      @mouseover="isShow = true"
      @mouseleave="isShow = false"
    >
      <div>
        <h2>热门歌单</h2>
      </div>
      <div class="choose">
        <span
          v-for="(item, index) in sortList"
          :key="index"
          @click="chooseSort(item, index)"
          :style="{
            color: index == num ? 'rgb(255, 165, 0)' : '',
          }"
        >
          <span>{{ item }}</span>
          <i></i>
        </span>
      </div>
      <div class="content">
        <ul class="sort">
          <li
            v-for="(item, index) in resultList"
            :key="index"
            class="img"
            @mouseover="show = index"
            @mouseleave="show = false"
            @click="gedan(item)"
          >
            <transition name="fade">
              <div class="run" v-show="show === index"></div>
            </transition>
            <img v-lazy="item.coverImgUrl" alt="" :style="{}" />
            <div class="name">
              {{ item.name }}
            </div>
            <div class="count">
              播放量&nbsp;&nbsp;&nbsp;{{ item.playCount }}
            </div>
            <div class="share">
              收藏量&nbsp;&nbsp;&nbsp;{{ item.shareCount }}
            </div>
          </li>
        </ul>

        <transition name="left-fade">
          <div class="left" v-show="isShow == true">
            <img
              src="../../../assets/left.png"
              alt=""
              @click="gotoPage(prevIndex)"
            />
          </div>
        </transition>
        <transition name="right-fade">
          <div class="right" v-show="isShow == true">
            <img
              src="../../../assets/right.png"
              alt=""
              @click="gotoPage(nextIndex)"
            />
          </div>
        </transition>
      </div>
    </div>
    <div
      class="newSing"
      @mouseover="newShow = true"
      @mouseleave="newShow = false"
    >
      <transition name="sing-left-fade">
        <div
          class="left"
          v-show="newShow == true"
          @click="gotoNewSing(prevNewIndex)"
        >
          <img src="../../../assets/left.png" alt="" />
        </div>
      </transition>
      <transition name="sing-right-fade">
        <div
          class="right"
          v-show="newShow == true"
          @click="gotoNewSing(nextNewIndex)"
        >
          <img src="../../../assets/right.png" alt="" />
        </div>
      </transition>
      <h2>新碟上架</h2>
      <div class="content">
        <div
          v-for="(item, index) in albumList"
          :key="index"
          class="item"
          @mouseover="newIsShow = index"
          @mouseleave="newIsShow = false"
          @click="gotoAlbum(item)"
        >
          <transition name="fade">
            <div class="run" v-show="newIsShow === index"></div>
          </transition>
          <div class="img">
            <img v-lazy="item.picUrl" alt="" />
          </div>
          <div class="name" @click="gotoAlbum(item)">
            {{ item.name }}
          </div>
          <div class="artName">{{ item.artist.name }}</div>
        </div>
      </div>
    </div>
    <div id="rank">
      <h2>排行榜</h2>
      <ul class="content">
        <li v-for="(item, index) in rankList" :key="index" class="liItem">
          <div class="rankName">
            {{ item.name }}
          </div>
          <div class="rank">
            <div
              v-for="(rankItem, rankIndex) in item.tracks"
              :key="rankIndex"
              class="contItem"
              @mousemove="
                rankShow = index;
                singShow = rankIndex;
              "
              @mouseleave="
                rankShow = false;
                singShow = false;
              "
            >
              <div class="num">
                {{ rankIndex + 1 }}
              </div>
              <div
                class="des"
                :style="{
                  width:
                    rankShow === index && singShow == rankIndex ? '130px' : '',
                }"
              >
                <div
                  class="singName"
                  :style="{
                    color:
                      rankShow === index && singShow == rankIndex
                        ? 'rgb(255, 165, 0)'
                        : '',
                  }"
                >
                  {{ rankItem.name }}
                </div>
                <div class="name">
                  {{ rankItem.ar[0].name }}
                </div>
              </div>
              <div
                class="play"
                v-show="rankShow === index && singShow === rankIndex"
              >
                <img
                  @click="playRankMusic(rankItem)"
                  src="../../../assets/play.png"
                  alt=""
                />
              </div>
            </div>
          </div>
          <!-- <div class="more">查看更多></div> -->
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import loading from "../../../components/loading.vue";
export default {
  name: "recommend",
  components: {
    loading,
  },
  data() {
    return {
      // 加载动画是否显示
      isLoading: true,
      // 新歌的箭头
      newShow: false,
      // 箭头是否显示
      isShow: false,
      // 播放键是否显示
      show: false,
      // 新歌的播放键是否显示
      newIsShow: false,
      // 显示第几页
      pageShow: 1,
      // 选择分类
      num: 0,
      value: "",
      // 推荐分类
      sortList: [],
      resultList: [],
      //   total
      resultsList: [],
      //   当前是第几页
      currentIndex: 1,
      // 新碟上架列表
      albumList: [],
      // 全部新碟
      albumsList: [],
      // 新碟当前是第几页
      currentNewIndex: 1,
      // 排行榜列表
      rankList: [],
      // 排行榜是否显示播放键
      // 第几个排行榜
      rankShow: false,
      // 第几首音乐
      singShow: false,
      // 最新音乐
      newMusicList: [],
      // 最新音乐的播放键是否显示
      newMusicShow: false,
    };
  },
  methods: {
    // 选择分类
    chooseSort(item, index) {
      this.num = index;
      this.value = item;

      this.$axios({
        url: "/top/playlist/highquality",
        parmas: {
          limit: 20,
          cat: this.value,
        },
      }).then((result) => {
        this.resultList = [];
        this.resultsList = [];
        this.resultsList = result.data.playlists;
        for (let i = 0; i < 5; i++) {
          this.resultList.push(result.data.playlists[i]);
        }
      });
    },
    // 轮播
    gotoPage(index) {
      this.currentIndex = index;
      this.resultList = [];
      for (let i = (index - 1) * 5; i < index * 5; i++) {
        this.resultList.push(this.resultsList[i]);
      }
    },
    // 新碟轮播
    gotoNewSing(index) {
      this.currentNewIndex = index;
      this.albumList = [];
      for (let i = (index - 1) * 4; i < index * 4; i++) {
        this.albumList.push(this.albumsList[i]);
      }
    },
    // 新歌播放
    playById(item) {
      this.$axios({
        url: "/song/url",
        params: {
          id: item.id,
        },
      }).then((res) => {
        let url = res.data.data[0].url;
        let data = {
          url,
          item,
        };
        this.$bus.$emit("get-newSong-src", data);
        console.log(item);
        // this.$router.replace({
        //   name: "player",
        // });
      });
    },
    // 排行榜音乐播放
    playRankMusic(item) {
      this.$axios({
        url: "/song/url",
        params: {
          id: item.id,
        },
      }).then((res) => {
        let url = res.data.data[0].url;
        let data = {
          url,
          item,
        };
        this.$bus.$emit("get-src", data);
      });
    },
    // 跳转至歌单详情
    gedan(item) {
      // this.$bus.$emit("get-id", item.id);
      this.$router.replace({
        name: "gdDetail",
        query: {
          id: item.id,
        },
      });
    },
    // 跳转至专辑详情
    gotoAlbum(item) {
      this.$router.replace({
        name: "album",
        query: {
          id: item.id,
        },
      });
    },
  },
  computed: {
    prevIndex() {
      if (this.currentIndex == 1) {
        return this.resultList.length;
      } else {
        return this.currentIndex - 1;
      }
    },
    nextIndex() {
      if (this.currentIndex == this.resultList.length) {
        return 1;
      } else {
        return this.currentIndex + 1;
      }
    },
    prevNewIndex() {
      if (this.currentNewIndex == 1) {
        return this.albumList.length;
      } else {
        return this.currentNewIndex - 1;
      }
    },
    nextNewIndex() {
      if (this.currentNewIndex == this.albumList.length) {
        return 1;
      } else {
        return this.currentNewIndex + 1;
      }
    },
  },
  mounted() {},
  created() {
    this.$axios({
      url: "/playlist/highquality/tags",
    }).then((result) => {
      this.sortList = [];
      result.data.tags.forEach((element) => {
        if (element.category == 0) {
          this.sortList.push(element.name);
        }
      });
    });
    this.$axios({
      url: "/top/playlist/highquality?before=1632369804000&limit=20&cat='华语'",
    }).then((result) => {
      this.isLoading = false;
      this.resultList = [];
      this.resultsList = [];
      this.resultsList = result.data.playlists;
      for (let i = 0; i < 5; i++) {
        this.resultList.push(result.data.playlists[i]);
      }
    });
    this.$axios({
      url: "/album/newest",
    }).then((res) => {
      this.albumsList = res.data.albums;
      this.albumList = [];
      for (let i = 0; i < 4; i++) {
        this.albumList.push(res.data.albums[i]);
      }
    });
    // 排行榜列表
    this.$axios({
      url: "/playlist/detail?id=3779629",
    }).then((res) => {
      let list = [];
      for (let i = 0; i < 5; i++) {
        list.push(res.data.playlist.tracks[i]);
      }
      this.rankList.push({
        name: res.data.playlist.name,
        tracks: list,
      });
    });
    this.$axios({
      url: "/playlist/detail?id=19723756",
    }).then((res) => {
      let list = [];
      for (let i = 0; i < 5; i++) {
        list.push(res.data.playlist.tracks[i]);
      }
      this.rankList.push({
        name: res.data.playlist.name,
        tracks: list,
      });
    });
    this.$axios({
      url: "/playlist/detail?id=2884035",
    }).then((res) => {
      let list = [];
      for (let i = 0; i < 5; i++) {
        list.push(res.data.playlist.tracks[i]);
      }
      this.rankList.push({
        name: res.data.playlist.name,
        tracks: list,
      });
    });
    this.$axios({
      url: "/playlist/detail?id=3778678",
    }).then((res) => {
      let list = [];
      for (let i = 0; i < 5; i++) {
        list.push(res.data.playlist.tracks[i]);
      }
      this.rankList.push({
        name: res.data.playlist.name,
        tracks: list,
      });
    });
    this.$axios({
      url: "/playlist/detail?id=991319590",
    }).then((res) => {
      let list = [];
      for (let i = 0; i < 5; i++) {
        list.push(res.data.playlist.tracks[i]);
      }
      this.rankList.push({
        name: res.data.playlist.name,
        tracks: list,
      });
    });

    // 最新音乐
    this.$axios({
      url: "/personalized/newsong",
      params: {
        limit: 9,
      },
    }).then((res) => {
      this.newMusicList = res.data.result;
    });
  },
};
</script>

<style scoped>
@import url("../../../css/recom");
</style>